<template>
  <div class="product-detail-page">
    <!-- 面包屑导航 -->
    <div class="breadcrumb-section">
      <div class="container">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">{{ $t('common.home') }}</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/products' }">{{ $t('products.breadcrumb') }}</el-breadcrumb-item>
          <el-breadcrumb-item>{{ $t('productDetail.breadcrumb') }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>

    <div class="page-content">
      <div class="container">
        <!-- 产品基本信息 -->
        <div class="product-header">
          <div class="product-image">
            <img :src="product.image" :alt="product.name" @error="handleImageError">
          </div>
          <div class="product-info">
            <h1 class="product-name">{{ product.name || '' }}</h1>
            <p class="product-category">{{ product.category || '' }}</p>
            <div class="product-tags">
              <el-tag v-for="tag in (product.tags || [])" :key="tag" size="small" type="primary">
                {{ tag }}
              </el-tag>
            </div>
          </div>
        </div>

        <!-- 产品概述 -->
        <div class="product-overview">
          <h2 class="section-title">{{ $t('productDetail.overview.title') }}</h2>
          <div class="overview-content">
            <div class="overview-text">
              <p>{{ product.overview || '' }}</p>
            </div>
            <div class="overview-features">
              <h3>{{ $t('productDetail.overview.keyFeatures') }}</h3>
              <ul>
                <li v-for="feature in (product.features || [])" :key="feature">{{ feature }}</li>
              </ul>
            </div>
          </div>
        </div>

        <!-- 产品视频 -->
        <div class="product-video">
          <h2 class="section-title">{{ $t('productDetail.video.title') }}</h2>
          <div class="video-container">
            <div class="video-placeholder" @click="playVideo">
              <img :src="product.videoThumbnail" :alt="product.name" @error="handleImageError">
              <div class="video-overlay">
                <div class="play-button">
                  <i class="el-icon-video-play"></i>
                </div>
                <p class="video-duration">{{ product.videoDuration }}</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 下载中心 -->
        <div class="download-center">
          <h2 class="section-title">{{ $t('productDetail.download.title') }}</h2>
          <div class="download-content">
            <div class="download-list">
              <div v-for="file in (product.downloads || [])" :key="file.id" class="download-item">
                <div class="file-info">
                  <div class="file-icon">
                    <i class="el-icon-document"></i>
                  </div>
                                     <div class="file-details">
                     <h4 class="file-name">{{ file.name }}</h4>
                     <p class="file-desc">{{ file.description }}</p>
                   </div>
                </div>
                                 <div class="download-actions">
                   <el-button 
                     type="primary" 
                     size="small" 
                     @click="openFile(file)"
                   >
                     <i class="el-icon-view"></i>
                     {{ $t('productDetail.download.download') }}
                   </el-button>
                 </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 视频播放弹窗 -->
    <el-dialog
      :visible.sync="videoDialogVisible"
      :title="product.name"
      width="80%"
      :before-close="closeVideoDialog"
      class="video-dialog"
    >
      <div class="video-player">
        <video 
          ref="videoPlayer"
          :src="product.videoUrl"
          controls
          autoplay
          class="video-element"
        >
          {{ $t('productDetail.video.notSupported') }}
        </video>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ProductDetail',
  data() {
    return {
      videoDialogVisible: false,
      product: {}
    }
  },
  computed: {
    productData() {
      const productId = parseInt(this.$route.params.id)
      // 模拟产品数据库
      const products = {
        1: {
          id: 1,
          name: '海康威视 DS-2CD2T47G1-L 4K超清网络摄像机',
          category: '前端产品',
          image: 'https://picsum.photos/400/300?random=21',
          tags: ['4K超清', '夜视功能', '防水防尘', 'AI智能'],
          overview: '海康威视DS-2CD2T47G1-L是一款高性能的4K超清网络摄像机，采用先进的图像处理技术，提供卓越的视频质量和智能分析功能。该产品适用于各种安防监控场景，为用户提供清晰、稳定的视频监控解决方案。',
          features: [
            '4K超高清分辨率，提供卓越画质',
            '先进的夜视技术，24小时监控',
            'IP67防水防尘等级，适应恶劣环境',
            '智能移动侦测和越界报警',
            '支持多种网络协议，易于集成',
            '低功耗设计，节能环保'
          ],
          videoUrl: 'https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_1mb.mp4',
          videoThumbnail: 'https://picsum.photos/800/450?random=22',
          videoDuration: '2:30',
          downloads: [
                         {
               id: 1,
               name: 'DS-2CD2T47G1-L 用户操作手册',
               description: '详细的产品安装、配置和使用说明',
               url: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
               downloading: false
             },
             {
               id: 2,
               name: 'DS-2CD2T47G1-L 技术规格书',
               description: '产品技术参数和规格说明',
               url: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
               downloading: false
             },
             {
               id: 3,
               name: 'DS-2CD2T47G1-L 快速安装指南',
               description: '快速安装和初始配置指南',
               url: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
               downloading: false
             }
          ]
        },
        2: {
          id: 2,
          name: '海康威视 DS-2CD2T47G2-L 球型网络摄像机',
          category: '前端产品',
          image: 'https://picsum.photos/400/300?random=23',
          tags: ['360°旋转', '云台控制', '智能跟踪', '高清画质'],
          overview: '海康威视DS-2CD2T47G2-L是一款高性能的球型网络摄像机，支持360度全方位监控和云台控制，具备智能跟踪功能，为用户提供灵活、高效的监控解决方案。',
          features: [
            '360度全方位监控覆盖',
            '云台控制，灵活调整视角',
            '智能目标跟踪功能',
            '高清画质，细节清晰可见',
            '多种安装方式，适应不同场景',
            '远程控制，操作便捷'
          ],
          videoUrl: 'https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_1mb.mp4',
          videoThumbnail: 'https://picsum.photos/800/450?random=24',
          videoDuration: '3:15',
          downloads: [
                         {
               id: 1,
               name: 'DS-2CD2T47G2-L 用户操作手册',
               description: '球型网络摄像机安装和使用指南',
               url: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
               downloading: false
             },
             {
               id: 2,
               name: 'DS-2CD2T47G2-L 云台控制说明',
               description: '云台控制和智能跟踪功能说明',
               url: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
               downloading: false
             }
          ]
        },
        3: {
          id: 3,
          name: '海康威视 DS-2CD2T47G3-L 云台网络摄像机',
          category: '前端产品',
          image: 'https://picsum.photos/400/300?random=25',
          tags: ['大范围监控', '高倍变焦', '多种安装', '智能分析'],
          overview: '海康威视DS-2CD2T47G3-L是一款高性能的云台网络摄像机，支持大范围监控和高倍变焦，适用于需要远距离监控的场景，为用户提供专业的监控解决方案。',
          features: [
            '大范围监控，覆盖面积广',
            '高倍光学变焦，远距离清晰监控',
            '多种安装方式，适应不同环境',
            '智能视频分析功能',
            '防抖技术，画面稳定',
            '全天候监控，适应各种天气'
          ],
          videoUrl: 'https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_1mb.mp4',
          videoThumbnail: 'https://picsum.photos/800/450?random=26',
          videoDuration: '2:45',
          downloads: [
                         {
               id: 1,
               name: 'DS-2CD2T47G3-L 用户操作手册',
               description: '云台网络摄像机完整使用指南',
               url: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
               downloading: false
             },
             {
               id: 2,
               name: 'DS-2CD2T47G3-L 变焦功能说明',
               description: '高倍变焦功能详细说明',
               url: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
               downloading: false
             },
             {
               id: 3,
               name: 'DS-2CD2T47G3-L 安装支架说明',
               description: '多种安装方式和支架选择指南',
               url: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
               downloading: false
             }
          ]
        }
      }
      return products[productId] || products[1] || {}
    }
  },
  watch: {
    '$route'(to, from) {
      this.product = this.productData
    }
  },
  mounted() {
    this.product = this.productData
  },
  created() {
    this.product = this.productData
  },
  methods: {
    playVideo() {
      this.videoDialogVisible = true
    },
    
    closeVideoDialog() {
      this.videoDialogVisible = false
      // 停止视频播放
      if (this.$refs.videoPlayer) {
        this.$refs.videoPlayer.pause()
      }
    },
    
         openFile(file) {
       // 在新窗口中打开文件
       window.open(file.url, '_blank')
     },
    
    handleImageError(e) {
      e.target.style.display = 'none'
    }
  }
}
</script>

<style lang="scss" scoped>
.product-detail-page {
  .breadcrumb-section {
    background: #f8f9fa;
    padding: 15px 0;
    border-bottom: 1px solid #e9ecef;
    
    .el-breadcrumb {
      font-size: 14px;
    }
  }

  .page-content {
    padding: 40px 0;
  }

  .product-header {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 40px;
    margin-bottom: 60px;
    align-items: start;
    
    .product-image {
      img {
        width: 100%;
        height: 300px;
        object-fit: cover;
        border-radius: 8px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
      }
    }
    
    .product-info {
      .product-name {
        font-size: 32px;
        font-weight: bold;
        color: #2c3e50;
        margin-bottom: 10px;
      }
      
      .product-category {
        font-size: 16px;
        color: #666;
        margin-bottom: 20px;
      }
      
      .product-tags {
        display: flex;
        gap: 10px;
        margin-bottom: 30px;
        flex-wrap: wrap;
      }
    }
  }

  .section-title {
    font-size: 24px;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 30px;
    padding-bottom: 10px;
    border-bottom: 2px solid #409eff;
  }

  .product-overview {
    margin-bottom: 60px;
    
    .overview-content {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 40px;
      
      .overview-text {
        p {
          font-size: 16px;
          line-height: 1.8;
          color: #666;
          margin-bottom: 20px;
        }
      }
      
      .overview-features {
        h3 {
          font-size: 18px;
          font-weight: bold;
          color: #2c3e50;
          margin-bottom: 20px;
        }
        
        ul {
          list-style: none;
          padding: 0;
          
          li {
            position: relative;
            padding-left: 20px;
            margin-bottom: 12px;
            color: #666;
            line-height: 1.6;
            
            &::before {
              content: '✓';
              position: absolute;
              left: 0;
              color: #409eff;
              font-weight: bold;
            }
          }
        }
      }
    }
  }

  .product-video {
    margin-bottom: 60px;
    
    .video-container {
      .video-placeholder {
        position: relative;
        cursor: pointer;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        transition: transform 0.3s ease;
        
        &:hover {
          transform: scale(1.02);
          
          .video-overlay {
            background: rgba(0,0,0,0.7);
          }
          
          .play-button {
            transform: scale(1.1);
          }
        }
        
        img {
          width: 100%;
          height: 400px;
          object-fit: cover;
        }
        
        .video-overlay {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0,0,0,0.5);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          transition: background 0.3s ease;
          
          .play-button {
            width: 80px;
            height: 80px;
            background: rgba(255,255,255,0.9);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 15px;
            transition: transform 0.3s ease;
            
            i {
              font-size: 32px;
              color: #409eff;
            }
          }
          
          .video-duration {
            color: white;
            font-size: 14px;
            margin: 0;
          }
        }
      }
    }
  }

  .download-center {
    margin-bottom: 60px;
    
    .download-content {
      .download-list {
        .download-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 20px;
          border: 1px solid #e9ecef;
          border-radius: 8px;
          margin-bottom: 15px;
          transition: all 0.3s ease;
          
          &:hover {
            border-color: #409eff;
            box-shadow: 0 2px 12px rgba(64, 158, 255, 0.1);
          }
          
          .file-info {
            display: flex;
            align-items: center;
            flex: 1;
            
            .file-icon {
              width: 50px;
              height: 50px;
              background: #f8f9fa;
              border-radius: 8px;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-right: 15px;
              
              i {
                font-size: 24px;
                color: #409eff;
              }
            }
            
            .file-details {
              flex: 1;
              
              .file-name {
                font-size: 16px;
                font-weight: bold;
                color: #2c3e50;
                margin: 0 0 5px 0;
              }
              
              .file-desc {
                font-size: 14px;
                color: #666;
                margin: 0 0 8px 0;
                line-height: 1.4;
              }
              
              .file-meta {
                display: flex;
                gap: 15px;
                font-size: 12px;
                color: #999;
                
                span {
                  display: flex;
                  align-items: center;
                  
                  &::before {
                    content: '';
                    width: 4px;
                    height: 4px;
                    background: #ddd;
                    border-radius: 50%;
                    margin-right: 8px;
                  }
                  
                  &:first-child::before {
                    display: none;
                  }
                }
              }
            }
          }
          
          .download-actions {
            display: flex;
            gap: 10px;
            align-items: center;
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .product-detail-page {
    .product-header {
      grid-template-columns: 1fr;
      gap: 30px;
      
      .product-info {
        .product-name {
          font-size: 24px;
        }
      }
    }
    
    .product-overview {
      .overview-content {
        grid-template-columns: 1fr;
        gap: 30px;
      }
    }
    
    .product-video {
      .video-container {
        .video-placeholder {
          img {
            height: 250px;
          }
          
          .video-overlay {
            .play-button {
              width: 60px;
              height: 60px;
              
              i {
                font-size: 24px;
              }
            }
          }
        }
      }
    }
    
    .download-center {
      .download-content {
        .download-list {
          .download-item {
            flex-direction: column;
            align-items: flex-start;
            gap: 15px;
            
            .file-info {
              width: 100%;
              
              .file-icon {
                width: 40px;
                height: 40px;
                
                i {
                  font-size: 20px;
                }
              }
            }
            
            .download-actions {
              width: 100%;
              justify-content: flex-end;
            }
          }
        }
      }
    }
  }
}

// 视频弹窗样式
.video-dialog {
  .video-player {
    .video-element {
      width: 100%;
      height: 500px;
      border-radius: 8px;
    }
  }
}
</style>
